import React from 'react'
import { Layout, Row, Col, Tabs } from 'antd'
import Router from 'umi/router'
import { connect } from 'dva'
import { NavLink, withRouter } from 'react-router-dom'
import { getSystemMenu } from '@/services/user'
import RightContent from '@/components/GlobalHeader/RightContent'
import Logo from '@/components/GlobalHeader/Logo'
import TopMenu from '@/components/TopMenu'

const { TabPane } = Tabs
const { Header, Content } = Layout

class TopMenuLayout extends React.Component {
  state = {
    kgLocation: this.props.location.pathname,
    // 按钮权限列表
    buttonList: [],
  }

  componentDidMount() {
    getSystemMenu().then((res) => {
      if (res.retCode === '0') {
        let buttonList = res.data.buttonList || ''
        sessionStorage.setItem('buttonList', buttonList)
        this.setState({ buttonList })
      }
    })
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        kgLocation: nextProps.location.pathname,
      })
    }
  }

  render() {
    const { children, okgLocation } = this.props
    const { kgLocation, buttonList } = this.state

    // 算法模型 权限
    let model = buttonList && buttonList.indexOf('model') !== -1
    // 资源库 权限
    let resource = buttonList && buttonList.indexOf('resource') !== -1
    // 数据中心 权限
    let data_center = buttonList && buttonList.indexOf('data_center') !== -1
    // 模型中心 权限
    let model_center = buttonList && buttonList.indexOf('model_center') !== -1
    // 词典 权限
    let word_library = buttonList && buttonList.indexOf('word_library') !== -1
    // 词向量 权限
    let word_vector = buttonList && buttonList.indexOf('word_vector') !== -1

    return (
      <Layout className="layout">
        <Header
          style={{
            width: '100%',
            backgroundColor: '#fff',
            padding: '0 32px',
            boxShadow: '0px 4px 4px 0px rgba(0, 0, 0, 0.1)',
            position: 'fixed',
            top: 0,
            left: 0,
            zIndex: 16,
          }}
        >
          <Row>
            <Logo span={3} text={'模型平台'} />
            <Col span={17}>
              <TopMenu />
            </Col>
            <Col span={4}>
              <RightContent />
            </Col>
          </Row>
        </Header>
        <div id="contentBox" style={{ height: '100vh', padding: '64px 0px', backgroundColor: '#fff' }}>
          <div style={{ padding: '0px 24px', backgroundColor: '#fff' }}>
            {(kgLocation.indexOf('dataCenter') !== -1 || kgLocation.indexOf('modelCenter') !== -1) && model && (
              <Tabs
                activeKey={kgLocation || '/algorithm/dataCenter'}
                onChange={(key) => {
                  Router.push(key)
                }}
                style={{ marginTop: 16 }}
              >
                {data_center && <TabPane tab="数据中心" key="/algorithm/dataCenter" />}
                {model_center && <TabPane tab="模型中心" key="/algorithm/modelCenter" />}
              </Tabs>
            )}
            {(kgLocation.indexOf('dictionary') !== -1 ||
              kgLocation.indexOf('vector') !== -1 ||
              kgLocation.indexOf('organization') !== -1) &&
              resource && (
                <Tabs
                  activeKey={kgLocation || '/resource/dictionary'}
                  onChange={(key) => {
                    Router.push(key)
                  }}
                  style={{ marginTop: 16 }}
                >
                  {word_library && <TabPane tab="词典" key="/resource/dictionary" />}
                  {word_library && <TabPane tab="标签管理" key="/resource/organization/allOrganization" />}
                  {word_vector && <TabPane tab="词向量" key="/resource/vector" />}
                </Tabs>
              )}
          </div>
          {children}
        </div>
      </Layout>
    )
  }
}

export default connect(({ tabmessages }) => ({
  okgLocation: tabmessages.okgLocation,
}))(TopMenuLayout)
